<template>
    <div class="widthFull back-fff" style="height: 498px;">
        <adImgView :src="ad_list1.length>0?ad_list1[0].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>0?ad_list1[0]:'')" />
    </div>
    
    <div class="main mainPadding MarT">
        <div class="max-w">
        <el-row :gutter="20">
            <el-col :span="16" >
                <div class="back-fff" style="height:244px;padding:40px;">
                    <el-row :gutter="44">
                        <el-col :span="19">
                            <el-form :model="form" label-width="80px">
                                <el-form-item label="标题/内容">
                                    <el-input v-model="form.name" />
                                </el-form-item>
                                <el-form-item label="年度">
                                    <el-input v-model="form.year" />
                                </el-form-item>
                                <el-form-item label="" >
                                    <div class="flex flex-j-s withFull">
                                        <el-radio-group v-model="form.vt">
                                            <el-radio :label="1">成果类</el-radio>
                                            <el-radio :label="2">论文类</el-radio>
                                        </el-radio-group>
                                        <div class="more cursor-p" @click="search">站内检索</div>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="5">
                            <div class="flex flex-j-c flex-align" style="flex-direction: column;">
                                <div style="width:86px;height: 86px;" class="shadow-1 border-r6">
                                    <imgView :src="code" />
                                </div>
                                <div class="font-title p-t">扫码联系客服</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8" >
                <div class="back-fff p-t p-l p-r p-b" style="height:244px;">
                    <div class="hotsearch"></div>
                    <div style="width:100%;height:76%;margin-top: 10px;" v-if="hotTag.length>0">
                        <worldCloud :data="hotTag" @cloudclick="goInfo1"></worldCloud>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="MarT "> 
            <el-row :gutter="20">
                <el-col :span="8" >
                    <Card1 title="主题方向" :more="false">
                        <template v-slot:main1>
                            <div style="height: 440px;">
                                <div class="flex withFull" v-for="item in list_ztfx" :key="item" style="margin-bottom:20px;">
                                    <div class="ztB-red" style="with:20%">{{ item.name }}</div>
                                    <div class="flex flex-w" style="width:80%">
                                        <div class="ztfx-item cursor-p" v-for="items in item.theme" :key="items" @click="search_s1(items)">{{ items.name }}</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </Card1>
                </el-col>
                <el-col :span="8" >
                    <Card1 title="行业分类" :more="false">
                        <template v-slot:main1>
                            <el-row :gutter="20" style="height: 440px;overflow-y: auto;">
                                <el-col :span="6" v-for="item in list_hyfl" :key="item" style="margin-bottom:10px">
                                    <div class="cursor-p" @click="search_s1(item)">
                                        <imgView size="50" :src="item.avatar" style="width:66px;height: 66px;" />
                                        <div class="font-title" style="margin-top:10px;">{{ item.name }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </Card1>
                </el-col>
                <el-col :span="8" >
                    <Card1 title="区域分类" :more="false">
                        <template v-slot:main1>
                            <div style="height: 440px;" v-if="list_fl3.length>0">
                                <mapView :dataList="list_fl3" @mapClick="search_s1"></mapView>
                            </div>
                        </template>
                    </Card1>
                </el-col>
            </el-row>
        </div>
        <FrameView class="p-l p-r p-b " @click="go_ach">
            <template v-slot:m>
                <TitleView class="MarT35" title="企业成果库" :cursor="true" @click="go_achHome" />
                <el-breadcrumb separator="|" class="MarT35 cursor-p">
                    <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i" @click="go_ach1(i)">{{ item.name }}</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="MarT" style="height: 470px;">
                    <el-empty v-if="list_qycg.length == 0" description="暂无内容" />
                    <el-row v-if="list_qycg.length > 0" :gutter="20" style="height: 100%;">
                        <el-col :span="5" style="height: 100%;">
                            <div class="shadow-1" style="height: 33.3%;padding:10px 0;"  @click="goInfo_zt(list_qycg.length>0?list_qycg[0]:'','企业成果库')">
                                <imgView :src="list_qycg.length>0?list_qycg[0].cover:''"/>
                            </div>
                            <div class="shadow-1" style="height: 66.6%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>4?list_qycg[4]:'','企业成果库')">
                                <imgView :src="list_qycg.length>4?list_qycg[4].cover:''" />
                            </div>
                        </el-col>
                        <el-col :span="5" style="height: 100%;" >
                            <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>1?list_qycg[1]:'','企业成果库')">
                                <imgView :src="list_qycg.length>1?list_qycg[1].cover:''" />
                            </div>
                            <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>5?list_qycg[5]:'','企业成果库')">
                                <imgView :src="list_qycg.length>5?list_qycg[5].cover:''" />
                            </div>
                            <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>8?list_qycg[8]:'','企业成果库')">
                                <imgView :src="list_qycg.length>8?list_qycg[8].cover:''" />
                            </div>
                        </el-col>
                        <el-col :span="5" style="height: 100%;">
                            <div class="shadow-1" style="height: 66.6%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>2?list_qycg[2]:'','企业成果库')">
                                <imgView :src="list_qycg.length>2?list_qycg[2].cover:''" />
                            </div>
                            <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>6?list_qycg[6]:'','企业成果库')">
                                <imgView :src="list_qycg.length>6?list_qycg[6].cover:''" />
                            </div>
                        </el-col>
                        <el-col :span="9" style="height: 100%;">
                            <div class="shadow-1" style="height: 50%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>3?list_qycg[3]:'','企业成果库')">
                                <imgView :src="list_qycg.length>3?list_qycg[3].cover:''" />
                            </div>
                            <div class="shadow-1" style="height: 50%;padding:10px 0;" @click="goInfo_zt(list_qycg.length>7?list_qycg[7]:'','企业成果库')">
                                <imgView :src="list_qycg.length>7?list_qycg[7].cover:''" />
                            </div>
                        </el-col>
                    </el-row>
                    
                </div>
            </template>
        </FrameView>
        <FrameView class="p-l p-r p-b">
            <template v-slot:m>
                <TitleView class="MarT35" title="热点专题库"></TitleView>
                <el-empty v-if="rdzt_list.length == 0" description="暂无内容" />
                <el-carousel width="100%" height="308px" direction="horizontal" arrow="always" indicator-position="none" :interval="2500" v-if="rdzt_list.length > 0">
                    <el-carousel-item  v-for="item in rdzt_list" :key="item" >
                        <div class="flex flex-w ad1-view" style="height: 100%;padding: 36px 88px;">
                            <div class="shadow-1" v-for="(items,is) in item" :key="is" style="width:23%;height: 50%;margin-bottom: 20px;margin-right: 16px;" @click="gozt(items,'热点专题库')">
                                <imgView :src="items.thumb" />
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </FrameView>
        <FrameView class="p-l p-r p-b">
            <template v-slot:m>
                <TitleView class="MarT35" title="图书资源库"></TitleView>
                <el-empty v-if="tszy_list.length == 0" description="暂无内容" />
                <el-carousel class="MarT35" width="100%" height="280px" direction="horizontal" arrow="always" indicator-position="none" :interval="2500" v-if="tszy_list.length > 0">
                    <el-carousel-item v-for="item in tszy_list" :key="item">
                        <div class="flex flex-w ad1-view" style="height: 100%;">
                            <div class="border-r6 shadow-1" v-for="(item,is) in item" :key="is" style="width:18%;height: 100%;margin-right: 16px;" @click="goBook(item)">
                                <imgView :src="item.cover" />
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </FrameView>
        <el-row :gutter="20" class="MarT">
            <el-col :span="16" >
                <div class="back-fff shadow-3 border-r6" style="height:778px;padding:10px;">
                    <div class="withFull" style="border:1px solid #d3d3d3;padding: 26px 20px;height: 100%;">
                        <TitleView title="特别推荐"></TitleView>
                        <div class="MarT35 cursor-p" v-for="(item,i) in list_tbtj" :key="i" @click="goInfo(item,'特别推荐')">
                            <div class="font-title font-text-al-l">{{ item.name }}</div>
                            <div class="font-content font-MTop12 font-text-al-l omit-2">{{ item.blurb }}</div>
                        </div>
                    </div>
                    
                </div>
            </el-col>
            <el-col :span="8" >
                <div style="height:778px;">
                    <Card1 title="创新人物排行榜" :more="false">
                        <template v-slot:main>
                            <div style="height:699px;">
                                <div class="MarT withFull" v-for="(item,i) in list_cxrw" :key="i" @click="goInfo(item,'创新人物排行榜')">
                                    <el-row :gutter="20" class="withFull" >
                                        <el-col :span="8" >
                                            <div style="width:104px;height: 104px;border-radius: 10px;overflow: hidden;">
                                                <imgView size='50' :src="item.thumb"/>
                                            </div>
                                        </el-col>
                                        <el-col :span="16" >
                                            <div class="flex flex-j-c" style="flex-direction: column;height: 100%;">
                                                <div class="font-title font-text-al-l" style="font-size: 19px;">{{ item.name }}</div>
                                                <div class="font-title font-text-al-l MarT">{{ item.blurb }}</div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </template>
                    </Card1>
                </div>
            </el-col>
        </el-row>
        <div class="ad-view MarT">
            <adImgView :src="ad_list2.length>0?ad_list2[0].img:''" @click="proxy.$comJs.openUrl(ad_list2.length>0?ad_list2[0]:'')" />
        </div>
    </div>
    </div>
</template>
<script setup>
import CryptoJS from 'crypto-js';
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import TitleView from '../components/title.vue';
import FrameView from '../components/frame.vue';
import Card1 from '../components/card1.vue';
import worldCloud from '../components/worldCloud.vue';
import mapView from '../components/map/index1.vue';
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
const store = new useStore();
const Router = useRouter();
    // 导航下对应模块
    var list_children = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].children
    // 面包屑
    const module_list = ref([
        {id:10,name:'学习书库',show:false},
        {id:9,name:'专题库',show:false},
        {id:8,name:'企业成果库',show:false},
        {id:147,name:'特别推荐',show:false},
    ])
    // const breadcrumb_list =  proxy.$comJs.extract(list_children,'企业成果库','name')[0].children
    const breadcrumb_list =  ref([])

    // 广告
    const ad_list1 = ref([])
    const ad_list2 = ref([])
    const getAd=()=>{
        proxy.$comJs.getAd(proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id,0,function(res){
            var list1 = [],list2=[],list3=[],list4=[],list5=[]
            res.list.map((item)=>{
                if(item.location == 1){
                    list1.push(item)
                }
                if(item.location == 5){
                    list2.push(item)
                }
            })
            ad_list1.value = list1.length>0?list1:[]
            ad_list2.value = list2.length>0?list2:[]
        })
    }
    getAd()
    const form = ref({
        name:'',
        year:'',
        vt: 1,
    })
    const code = ref('')
    const getCode=()=>{
        proxy.$http.request(proxy.$api.contact,'get',{},false, function (res) {
            if(res&&res.data){
                code.value = res.data.data.code
            }
        })
    }
    getCode()
    const search=()=>{
        if(!form.value.name){
            proxy.$comJs.msg('error','请填入标题/内容')
            return;
        }
        Router.push({
            path:'/animatedly/listSearch',
            query:{
                ob:proxy.$comJs.encry({
                    title:form.value.name,
                    ty:0,
                    form:form.value,
                    first_title:'成果库',
                })
            }
        });
    }
    const search_s=(item)=>{
        Router.push({
            path:'/animatedly/listSearch',
            query:{
                ob:proxy.$comJs.encry({
                    title:item.name,
                    form:{
                        name:item.name,
                        year:'',
                        vt: '',
                    },
                    first_title:'成果库',
                })
            }
        });
    }
    const search_s1=(item)=>{
        Router.push({
            path:'/animatedly/list',
            query:{
                ob:proxy.$comJs.encry({
                    title:item.name,
                    id:item.id||item.aid,
                    first_title:'成果库',
                })
            }
        });
    }
    // 区域列表
    const list_fl3 = ref([])
    const getArea=()=>{
        proxy.$http.request(proxy.$api.area,'get',{},false, function (res) {
            if(res&&res.data){
                list_fl3.value = []
                res.data.data.list.map((item)=>{
                    list_fl3.value.push({
                        ...item,
                        name:item.name.replace(/省|市|壮族自治区|特别行政区|回族自治区|特别行政区|维吾尔自治区|自治区/g, ""),
                        value:Math.floor(Math.random() * 100) + 1,
                        select:false,
                        countDevice: 4, countAlarm: 3,
                    })
                })
            }
        })
    }
    getArea()
    // 24小时热搜
    const hotTag=ref([])
    const gethotWord=()=>{
        proxy.$http.request(proxy.$api.hotWord,'get',{},false, function (res) {
            if(res&&res.data){
                hotTag.value = res.data.data.list
            }
        })
    }
    gethotWord()
    // 企业成果库
    // 企业成果库-列表
    const list_qycg = ref([])
    const getqycgkList=(i)=>{
        const url = i == -1?proxy.$api.enterprise+'?nextTag=0&pageSize=9&prevTag=0':proxy.$api.enterprise+'?nextTag=0&cateId='+breadcrumb_list.value[i].id+'&pageSize=9&prevTag=0'
        proxy.$http.request(url,'get',{},false, function (res) {
            if(res&&res.data){
                list_qycg.value = res.data.data.list 
            }
        })
    }
    // 行业分类
    const list_hyfl = ref([])
    const ztNav = ref([])
    const getClass=()=>{
        proxy.$http.request(proxy.$api.classlist+'?ty=1','get',{},false, function (res) {
            if(res&&res.data){
                list_hyfl.value = []
                res.data.data.list.map((item)=>{
                    list_hyfl.value.push({
                        ...item,
                        select:false
                    })
                })
            }
        })
        // 企业分类
        proxy.$http.request(proxy.$api.classlist+'?ty=3','get',{},false, function (res) {
            if(res&&res.data){
                breadcrumb_list.value = res.data.data.list
                getqycgkList(-1)
            }
        })
        // 专题分类
        proxy.$http.request(proxy.$api.classlist+'?ty=4','get',{},false, function (res) {
            if(res&&res.data){
                ztNav.value = res.data.data.list
            }
        })
    }
    getClass()
    // 企业分类点击
    const go_ach1 = (i)=>{
        getqycgkList(i)
        // Router.push('/ach/i6');
        // Router.push({
        //     path:'/ach/i6',
        //     query:{
        //         ob:proxy.$comJs.encry({
        //             item:item
        //         })
        //     }
        // });
        // proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+item.id+'&pageSize=9&prevTag=0','get',{},false, function (res) {
        //     list_qycg.value = []
        //     if(res&&res.data){
        //         list_qycg.value = res.data.data.list
        //     }
        // })
    }
    // 主题方向
    const list_ztfx = ref([])
    const get_ztfx_list=()=>{
        proxy.$http.request(proxy.$api.theme,'get',{},false, function (res) {
            if(res&&res.data){
                list_ztfx.value = []
                res.data.data.list.map((item)=>{
                    list_ztfx.value.push({
                        ...item,
                        select:false
                    })
                })
            }
        })
    }
    get_ztfx_list()
    
    // 热点专题
    const rdzt_list_old =[]
    const rdzt_list = ref([])

    const newlist=()=>{
        proxy.$http.request(proxy.$api.topicList+'?nextTag=0&pageSize=8&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    
                    rdzt_list.value = proxy.$comJs.carveUp(res.data.data.list,8)
                    // rdzt_list.value = [
                    //     {
                    //         0:[
                    //             {}
                    //         ]
                    //     }
                    // ]

                } 
            }
        })
        
    }
    newlist()
    // 图书资源
    const tszy_list_old =[]
    const tszy_list = ref([])
    const newlist1=()=>{
        proxy.$http.request(proxy.$api.list_book_list+'?nextTag=0&pageSize=5&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    tszy_list.value = proxy.$comJs.carveUp(res.data.data.list,5)
                } 
            }
        })
        
    }
    newlist1()
    // 特别推荐
    const list_tbtj=ref([])
    const getlist_tbtj=()=>{
        if(list_children.length<4){
            return;
        }
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+list_children[3].id+'&pageSize=8&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list_tbtj.value = res.data.data.list
                } 
            }
        })
    }
    // 创新人物排行榜
    const list_cxrw = ref([])
    const getlist_cxrw=()=>{
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid=165&pageSize=6&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list_cxrw.value = res.data.data.list
                } 
            }
        })
        
    }
    getlist_cxrw()
    const go_ach = ()=>{
        // Router.push('/ach/i5');
    }
    const go_achHome=()=>{
        // Router.push({
        //     path:'/ach/i5',
        //     query:{
        //         ob:proxy.$comJs.encry({
        //             titleList:list_children[0].children
        //         })
        //     }
        // });
    }
    
    const goInfo=(item,name)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:name,
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:'成果库',
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
    const goInfo_zt=(item,name)=>{
        const routeUrl = Router.resolve({
            name:'ach-a5',
            query:{
                ob:proxy.$comJs.encry({
                    nav:proxy.$comJs.extract(list_children,'企业成果库','name')[0],
                    eid:item.id,
                    path:'/animatedly/list',
                    first_title:'成果库',
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
    // 跳转专题首页
    const gozt = (item)=>{
        if(item.ty !== 2){
            return;
        }
        const routeUrl = Router.resolve({
            name:'s2',
            query:{
                ob:proxy.$comJs.encry({
                    nav:ztNav.value[3]
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
    const goInfo1=(item)=>{
        if(!item){
            return;
        }
        proxy.$comJs.openMoreList('成果库','24小时热搜',item.kid)
    }
    const goBook=(item)=>{
        Router.push({
            path:'/ach/i4',
            query:{
                title:item.title,
                newsId:item.bookId
            }
        });
    }
    const sort_module=()=>{
    module_list.value.map((item,i)=>{
        if(item.id == 147){
            getlist_tbtj()
        }
        
        })
    }
    sort_module()
</script>
    
<style lang='less' scoped>
.more{
    padding:0 20px;
    height: 40px;
    color: #d10b00;
    background: #fff2f1;
    border:1px solid #d10b00;
    border-radius: 6px;
    line-height: 40px;
    // margin: 0 auto;
}
.hotsearch{
    width: 188px;
    height: 40px;
    background: #d10b00;
    background: url('@/assets/img/title-tip2.png');
    background-size: 100% 100%;
}
.ztfx{
    width:64px;
    height: 64px;
    background: #d00b00;
    color: #fff;
    font-weight: bold;
    line-height: 64px;
    font-size: 17px;
    text-align: center;
}
.ztfx-item{
    width: 25%;
    height: 16px;
    border-right:1px solid #333;
    margin-bottom:5px;
    text-align: center;
}
.qicg-view{
    width: 100%;
}
.qicg-view:nth-child(1){
    height: 30%;
}
.qicg-view:nth-child(2){
    height: 70%;
    padding-top:20px;
}
.qicg-view:nth-child(4){
    height: 30%;
    padding-top:20px;
}
.qicg-view:nth-child(3){
    height: 70%; 
}
.qicg-view:nth-child(5){
    height: 60%;
}
.qicg-view:nth-child(6){
    height: 40%; 
    padding-top:20px;
}
.qicg-view:nth-child(7){
    height: 30%;
}
.qicg-view:nth-child(8){
    height: 70%; 
    padding-top:20px;
}
</style>

